<template>
  <div class="rowdialog">
    <div class="item2">
      <!-- <div class="header">
        <div class="title1">
          <i class="el-icon-data-analysis"></i><span>异常报表信息</span>
        </div>
      </div> -->
      <div class="resolveBtn">
        <img
          src="../../assets/images/multidrugbtn.png"
          alt=""
          @click="handleReslove"
        />
        <!-- <el-button type="danger" @click="handleReslove">处理完成</el-button> -->
      </div>
      <div class="content">
        <div class="rightContent">
          <div class="formCenter">库存报表</div>
          <div class="largeLand">
            <el-table
              :data="inventorytableData"
              border
              height="700px"
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :header-cell-style="{ background: '#763cfb', color: '#ffffff' }"
            >
              <el-table-column
                align="center"
                prop="fmCustomerId"
                label="货主编号"
              >
              </el-table-column>
              <el-table-column align="center" prop="hz" label="货主名称">
              </el-table-column>
              <el-table-column align="center" prop="sku" label="商品代码">
              </el-table-column>
              <el-table-column align="center" prop="skuDescr1" label="商品名称">
              </el-table-column>
              <el-table-column align="center" prop="lotatt04" label="批号">
              </el-table-column>
              <el-table-column align="center" prop="alternateSku3" label="规格">
              </el-table-column>
              <el-table-column align="center" prop="zl" label="装量">
              </el-table-column>
              <el-table-column align="center" prop="dw" label="单位">
              </el-table-column>
              <el-table-column align="center" prop="locationId" label="库位">
              </el-table-column>
              <el-table-column
                align="center"
                prop="qtyAvailed"
                label="库存数量"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="qtyAllocated"
                label="预分配"
              >
              </el-table-column>

              <el-table-column
                align="center"
                prop="alternateSku4"
                label="生产厂家"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="leftcontent">
          <div class="formCenter">冲红报表</div>
          <div class="largeB">
            <el-table
              :data="flushtableData"
              border
              height="700px"
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :header-cell-style="{ background: '#1890ff', color: '#ffffff' }"
            >
              <el-table-column
                align="center"
                prop="customerId"
                label="货主编号"
                width="100px"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="orderno"
                label="订单号"
                width="150px"
              >
              </el-table-column>
              <el-table-column align="center" prop="sku" label="商品代码">
              </el-table-column>
              <el-table-column align="center" prop="lotatt04" label="批号">
              </el-table-column>
              <el-table-column align="center" prop="qty" label="数量">
              </el-table-column>
              <el-table-column align="center" prop="locationId" label="库位">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-dialog
        title="操作验证"
        :visible.sync="centerDialogVisible"
        width="22%"
        left
        append-to-body
        :close-on-click-modal="false"
      >
        <el-form
          :model="passForm"
          status-icon
          :rules="passrules"
          ref="passForm"
          label-width="60px"
          class="demo-ruleForm"
        >
          <el-form-item label="密码" prop="pass">
            <el-input
              type="password"
              v-model="passForm.pass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit('passForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { detailList, removeDrug } from "@/api/system/multidrug";
import { getcheckPassword } from "@/api/subSystem/continer";
export default {
  props: ["abnormalId"],
  data() {
    var passwordError = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      } else {
        getcheckPassword(value).then((res) => {
          this.priorityNum = res.msg;
          if (res.msg == "admin") {
            callback();
          } else if (res.msg == "supper") {
            callback();
          } else if (res.msg == "false") {
            callback(new Error("密码错误"));
          }
        });
      }
    };
    return {
      // 密码验证
      centerDialogVisible: false,
      passForm: {
        pass: null,
      },
      passrules: {
        pass: [{ validator: passwordError, trigger: "blur" }],
      },
      loading: false,
      inventorytableData: [],
      flushtableData: [],
    };
  },
  mounted() {
    this.getNumberStatic();
  },
  methods: {
    // 处理完成
    handleReslove() {
      this.centerDialogVisible = true;
      this.passForm.pass = null;
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          removeDrug(this.abnormalId).then((res) => {
            this.$message({
              message: "处理成功",
              type: "success",
            });
            this.centerDialogVisible = false;
            this.$emit("custom-event");
          });
          //   this.centerDialogVisible = false;
          //   this.$emit("custom-event");
        }
      });
    },
    goBack() {
      this.$router.push("/subSystem1");
    },
    getNumberStatic() {
      this.loading = true;
      detailList(this.abnormalId).then((res) => {
        this.inventorytableData = res.data.kcList[0];
        this.flushtableData = res.data.chList[0];
        this.loading = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.rowdialog {
  .el-icon-data-analysis::before {
    color: #00d9ff;
    margin-right: 8px;
  }
  .title1 {
    font-size: 16px;
    // margin-bottom: 15px;
    color: #808080;
    width: 200px;
    padding: 5px;
    border-bottom: 1px dotted #8ddfff;
  }
  .header {
    margin-top: -10px;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 220px;
      margin-right: 20px;
    }

    .backB {
      cursor: pointer;

      img {
        width: 20%;
      }
    }
  }
  .resolveBtn {
    width: 100%;
    text-align: center;
    margin-top: -50px;
    img {
      width: 50px;
      cursor: pointer;
    }
  }
  .content {
    display: flex;
    justify-content: space-around;
    .leftcontent {
      width: 47%;
      height: 100%;
    }
    .rightContent {
      width: 47%;
      height: 100%;
    }
  }
  .formCenter {
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    margin: 10px 0;
    text-align: center;
  }
  .footer {
    //   margin-top: 20px;
    //   width: 100%;
    //   min-height: 200px;
    z-index: 999;
  }
  .el-select {
    width: 240px;
  }
  ::v-deep .el-form {
    margin-left: 2%;
  }
  // 表格有滚动条使暂无数据居中
  ::v-deep .el-table__empty-block {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
  //   滚动条宽度
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px; // 横向滚动条
    height: 10px; // 纵向滚动条 必写
  }
  //   .largeLand {
  //     height: 172px;
  //   }
  //   .largeB {
  //     height: 172px;
  //   }
}
</style>